import React, { memo, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Carousel } from "antd";

import { getNewAlbumsActive } from "../../store/actionCreators";
import AlbumCover from "@/components/album-cover";
import ThemHeader from "@/components/them-header";
import { RecommendWrapper } from "./style";
export default memo(function NewAlbum() {
  const albumRef = useRef();
  const dispatch = useDispatch();
  const { newAlbums } = useSelector((state) => ({
    newAlbums: state.get("recommend").get("newAlbums"),
  }));
  //console.log(newAlbums);
  useEffect(() => {
    dispatch(getNewAlbumsActive(10));
  }, [dispatch]);
  return (
    <RecommendWrapper>
      <ThemHeader title="新碟上架" />
      <div className="list">
        <button
          className="arrow arrow-left sprite_02"
          onClick={(e) => albumRef.current.prev()}
        ></button>
        <div className="album">
          <Carousel dots={false} ref={albumRef}>
            {[0, 1].map((item) => {
              return (
                <div key={item} className="page">
                  {newAlbums.slice(item * 5, (item + 1) * 5).map((iten) => {
                    return (
                      <AlbumCover
                        key={iten.id}
                        info={iten}
                        size={100}
                        width={118}
                        bgp="-570px"
                      />
                    );
                  })}
                </div>
              );
            })}
          </Carousel>
        </div>
        <button
          className="arrow arrow-right sprite_02"
          onClick={(e) => albumRef.current.next()}
        ></button>
      </div>
    </RecommendWrapper>
  );
});
